<template>
  <div>
    <p>{{obj.name}}</p>
    <p>{{obj.age}}</p>
    <p>{{obj.desc.hobby}}</p>
    <button @click="obj.name='李四'">我要改名</button>
    <button @click="obj.age=18">我要变年轻</button>
    <button @click="obj.desc.hobby='美女'">我变了</button>
  </div>
</template>

<script>
import { reactive , watch } from 'vue'
export default {
  setup () {
    const obj = reactive({
      name: '张三',
      age: 8,
      desc: {
        hobby: '敲代码'
      }
    })
    // watch(obj, (newVal) => {
    //   console.log(newVal)
    // })
    // watch(() => obj.age, (newVal) => {
    //   console.log(newVal)
    // })
    // 深度监听  监听的对象内部数据变化也能触发函数
    watch(() => obj.desc, (newVal) => {
      console.log(newVal)
    }, {
      deep: true,
      immediate: true
    })
    return {
      obj
    }
  }
}
</script>

<style>

</style>
